<template>
  <el-collapse model-value="first">
    <el-collapse-item name="first" >
      <template #title>
        <SvgIcon name="setting"/>常规
      </template>
      <el-form :model="data" label-position="left" label-width="50px">
        <el-form-item label="名称:" prop="text">
          <el-input v-model="data.text"/>
        </el-form-item>
        <el-form-item label="描述:" prop="text">
          <el-input
              v-model="data.properties.description"
              :rows="2"
              type="textarea"
          />
        </el-form-item>
      </el-form>
    </el-collapse-item>
    <el-collapse-item name="tow" >
      <template #title>
        <SvgIcon name="setting"/>服务配置
      </template>
      <el-form :model="data.properties" label-position="left" >
        <el-form-item label="js脚本">
          <div class="form-design-code-editor" style="width: 100%">
            <div class="code-editor-tip">function Script(msg, metadata)</div>
            <code-editor v-model="data.properties.script" lang="javascript" />
            <div class="code-editor-tip">}</div>
          </div>
        </el-form-item>
      </el-form>
    </el-collapse-item>
  </el-collapse>
</template>

<script setup lang="ts">
import { usePropertiesPanelData } from '../../useapi';
import './style.css';

const data = usePropertiesPanelData()

</script>
